Superfish menu

Well I totally agree with you regarding the menu handling. I have a version that does Suckerfish drop menus (similar to my other theme "Newswire"), however I didn't include it in this release due to a z-indexing issue in Firefox 2 (all other browsers worked fine).

I have looked at Superfish briefly and thought it looked quite usable, so I will take a deeper look next week when I plan to clean up the theme for release (comments need some work theme love for IE6).

The other option is to use Nicemenus, although I tend to think this sort of thing can be included in the theme without the need for additional modules and only minor configuration required.

Checkout the new 6.x-2.0-dev release, it includes Superfish drop menus.

The demo site is running the latest version so you can see the menus working there - http://drupalstaging.com/pixture2/

I'm not sure if this is bug report or where it fits but I have uploaded the Pixture Reloaded theme today - beta version and cannot find where to enable the superfish menu. I also couldn't find a readme file to help. Any ideas would be great. Thanks

First, disable the "primary links" option under theme settings. Then go to the block configuration page for the theme, and move a menu block into the "superfish" catagory.

Its only in the 6.x-2.0-dev verion, the beta1 version does not include Superfish menus. I will deprecate the beta1 version in the coming days, when I feel the dev is ready to release as beta (waiting for more bug reports to come in).

RoboPhred is correct, follow his instructions (or the README in the dev version). Sorry for the confusion.

Im just a newbie poking about Drupal themes to get an idea of what can be done and noticing yours I took a closer look at the 6.x-2.0-dev snapshot.

With Windows the Superfish menus work well under IE7, complete with mouseout delay etc. Under FireFox 3.0.1, Safari 3.1.2 and Opera 9.52 however they just seem to display as a regular Suckerfish menu: instantly closing when the mouse pointer moves away. At the Superfish site Firefox, Opera and Safari display the examples without issue.

Thank you indeed for working on this theme and making it publicaly available

Hmmm. Odd thing is that I was looking at it today in IE7 & Opera and the Superfish JS was doing nothing, yet in FF2 all was normal. Couple of days ago when I first uploaded the new version everything was working fine in all browsers, even Safari was playing ball.

Can you tell me if its working in IE6 for you, at all? For me its not working which is pretty clear indication there's a wider issue.

I'll try to find some time over the weekend to look into it, if you spot anything obvious could you post here (maybe a patch even:), much appreciated.

Hello, sorry for the delay it took a little while to get access to the old win2k box a relative uses which has IE6 on it. The Superfish menus work without issue, on my little test site, your demo site and the Superfish example site.

Have you tried when logged out or only when logged in? Normally jquery doesnt load if you're logged out (unless requried by a module), and superfish needs jquery.js to load (jquery appears to always load when logged in).

I made a change to the live demo to make sure jquery.js always loads when superfish is active, I should have thought of this earlier, bit of an over sight on my part.

I'm still working on a better solution, but for now I am going to add to HEAD and release a new version tomorrow, along with a few other fixes.

Cheers.

I tested the Superfish menus with win2k-IE6 while logged out, just as an anonymous user in each case.

Ok, thanks, I'll keep testing things, thank-you very much for the feedback.

Hello, just an update regarding the 6.x-2.2-dev version. The Superfish menu's display correctly as an anonymous logged out user with IE6 under win2k; Firefox 3.0.1, Safari 3.1.2, Opera 9.52, Chrome 0.2.149.27 and IE7 under XP.

Gee thanks, hows it going with Chrome, frankly I'm hooked already, seems like a nice UI for gmail and other sundry aps etc etc.

Chrome is rather nice, hopefully other browsers will incorporate some of the ideas e.g. the sandboxing. Though it's not without some concerns, it'll be interesting to see whether Google allow an adblocking plugin etc.

Hey jmburnz,

I am interested in using superfish menus and applying them to other themes I have. Do you think that you could briefly outline how to add the to themes?

I would greatly appreciate it.
-ROR

@RoR, I think if you study Pixture Reloaded and the link right at the top of this thread you can figure it out.

1) Add the Plugin to the page - use either drupal_add_js or mytheme.info
Call the JS from the themes .info file or use drupal_add_js. PR does the later with a theme setting to give the user a choice (since not everyone will want it). These are the best ways of doing it since both trigger Drupal to add jquery.js which is required for the Superfish plugin to work.

You don't need a theme stetting- just a strait drupal_add_js will do it, or use the .info file method.

2) Load the Superfish CSS. Use the mytheme.info file for this or drupal_add_css. Again I use the latter based on the same theme setting. Alternatively you can dump all the CSS into the themes existing style.css file.

NOTE: Drupal adds style.css and script.js automatically if they're in the theme folder;)

3) Initialise the Plugin in page.tpl.php - see the code in the header of PR and read the docs regarding Superfish.

4) Customise the CSS -this is the hard bit. Out of the box it won't work - you have to customise it to suit Drupal (or the other way around...). You need to spend ages on the CSS to get it right. Study PR and this other site I am building that uses Superfish also - http://janabramsson.se/

I would think simply copying the CSS and html from PR would be a good start - to give you a good idea how it works.

And thats about it! I may put this into a book page with more details if I get time, could be helpful to others as well. Sorry but I really can't help much more than that - you do need to have a pretty good handle on Drupal theming and CSS to get this working well.

Hello, I'm trying to make Superfish menus work with Zen and Nice Menus module. I've written a post here: http://drupal.org/node/315523 Any help would be appreciated. Thank you very much!

I have it engaged using your theme, but it doesn't seem to matter whether I choose "expanded" or not in the menu settings. I can't get anything to nest (sub menus).

Update: Got it. Created new menu from scratch and made sure that when I added new items that I chose the proper parent, and the parent is "expanded."

I think we're done here.

Hi, didn't want to make another issue and I though y'all would like to read this anyway.

I think Pixture Reloaded should require this awesome module: http://drupal.org/project/menu_block

It's an alternative to using drupal's default "Primary Links" block.... and SOO much more. Any given "Menu Block" can start anywhere in any menu, and can render to any specific depth or infinitely... and menus can be expanded. This is 1000x times more flexible IMHO and should be implemented by default.

Here's what I've changed in the page.tpl.php file:

<?php if (!empty($superfish)): ?>
    <div id="superfish" class="clear">
        <div id="superfish-inner">
            <?php print $superfish; ?>
        </div> <!-- /#superfish-inner -->
    </div> <!-- /#superfish -->
<?php endif; ?>

I did away entirely with the $primary_links option... Honestly people would be crazy not to use superfish anyway.

Oh... and I changed the superfish js from being conditionally included. It's now in my script.js file located in the base theme directory. Drupal loads that file by default if it exists, just like page.tpl.php or template.php.

Many users dont want or dont need drop menus - which is why the theme does not load the JS by default and fully supports primary menus.

As you pointed out, this is pretty easy to include yourself, no need for the default theme to demand this.

I cant see any issue here, not sure why this was re-opened, closing again.

I didn't want to open another issue and I thought all those who commented here would like to read the post. ;)

Go drupal!

Hi, I wanted to do sth like "Examples" -> "with Supersubs" in http://users.tpg.com.au/j_birch/plugins/superfish/#sample5.
I am using the theme pixture_reloaded, and I modified the template.php and page.tpl.php (note tt i used width: 17,17,1 instead of the default 12,27,1) with the following (see below).

Although I managed to get similiar results, but I have having really unpredictable problems here and there!!
In IE, sometimes the menu doesn't drop down and a "Error on page" is shown on the bottom left, sometimes it works fine (especially after clicking the non-working drop-down menu n refreshing the page a few times).
In Firefox, the drop down always work, but I can't get the submenu in the second level to the width I want (it shows up on IE the width I want, but not firefox).

I don't have much backgrd knowledge w dropdown menu/javascript to start off with, and now I am really struck...
Anyone can help me sove the problem??? Would be very grateful to tt person...

***template.php***

// Conditionally load the Superfish JS
if (theme_get_setting('pixture_superfish')) {
  drupal_add_css(drupal_get_path('theme', 'pixture_reloaded') .'/sf/css/superfish.css', 'theme');
  drupal_add_js(drupal_get_path('theme', 'pixture_reloaded') .'/sf/js/superfish.js', 'theme');
  drupal_add_js(drupal_get_path('theme', 'pixture_reloaded') .'/sf/js/supersubs.js', 'theme');
  drupal_add_js(drupal_get_path('theme', 'pixture_reloaded') .'/sf/js/hoverIntent.js', 'theme');
}

***page.tpl.php***

<script type="text/javascript">  
   $(document).ready(function(){ 
      $('#superfish-inner ul').supersubs({ 
         minWidth: 17,
         maxWidth: 17,
         extraWidth: 1     
      }).superfish();  
   }); 
</script>

Hello,

I know it is a stupid question, but I actually cannot work it out, because I'm quite new to everything Drupal.
I really love your theme but I just don't get the menue to work.
The "primary links" option under theme settings is disabled. But i cannot find a "superfish" category on the configuration page for the theme.
I have unpacked the archive into the themes folder and I am using a completely fresh installation of Drupal. Do I have to install anything else and if yes how? I know it's stupid but I'm just getting to know the whole thing and don't have much knowledge about php, but I'd love to use your theme for my project, thus I'd appreciate if you could help me.

Thanks for your help.

@Leliel - create a new Menu (you can call it whatever you want) then on the Blocks page set the menu block to the Superfish Region, your menu will show up there. If your menu items have child items and each parent item is correctly set to be Expanded the child items will appear as the drop menu items.

Remember to set the theme setting - "Enable Superfish Drop Menus", and disable primary links from displaying (I think you already did that).

This is all in the README so pay close attention to themes and modules README files, often small problems can be solved just by going back and working through the README files one step at a time.

The directions are correct as far as they go, but it's easy to go astray; some text editing of and some elaboration within the README might be in order here. How the pieces fit together, and which menus.

Do disable the primary links in the Pixture Reloaded theme page, and enable Suckerfish, err, correction, Superfish. These are two checkboxes inside the Pixture Reloaded configuration page. The comment at the bottom of the configuration page is intended to point to the Toggle Display entry at the top of the same page. (There's likely a good reason why the two toggles on this page are separate; where I'd expect locality or a more direct linkage or cross-check here. It can be a little confusing to the uninitiated. eg: me. And Drupal has a gazillion menus scattered through administrative-land.)

Recognize that the primary site navigation menu is ignored; the Suckerfish, err, Superfish menu bits are parallel.

When I first started with this, I ended up (incorrectly) disabling the primary links stuff over in the general theme setting page. That's not AFAIK necessary and (given you may or will be running other themes) you probably want to be careful with what you disable. I also disabled all of the menu entries within the site navigation, but I'll likely go back through and re-enable those to get the other themes going.)

Back to Pixture Reloaded. Use the Administer - Site Building - Add menu knob, and add a fresh new Menu called, say, Menu and with a comment Menu Block. This will replace your site navigation menu.

Select Administer - Site Building - Blocks. Drag the menu up to the Suckerfish, rats, Superfish section or use the region popup to select the same.

Select the Menu, and add the entries you want to see. It seems best to select the entries (that you want to see) as both Enabled and Expanded. The top-level entries are visible at the top of the page (in the position of the navigation menu in Drupal)

Again, what's there in the README is correct. Like a Unix man page, it's correct. But it can be a little confusing, at least until you understand how Pixture Reloaded and Suc...Superfish works.

Edit 19-Jan-2009: typed Suckerfish in the first version, meant Superfish. I might have had a chance of remembering something like Remora here, but that name is probably taken, too. :-)

Thank to both of you so far, but the actual problem ist, that I don't find the "Enable Superfish Drop Menus". I guess it should be at "Administer > Site Building > Themes > Pixture > configure" but there I only can find:
Toggle display
Enable or disable the display of certain page elements.
Logo
Site name
Site slogan
Mission statement
User pictures in posts
User pictures in comments
Search box
Shortcut icon
Primary links
Secondary links

and the other global settings like logo, favicon and page width.

Am I looking at the wrong place?
And as I can't enable it I can't find the region in "blocks" either.

Sry, for being that slow...

@Hoff - while I appreciate you editing your comment to change the mistakes, it would read better without the crud.

@Leliel - This theme is Pixture Reloaded, sounds like you have the old original Pixture theme enabled (table based).

Okay, now I see, I had downloaded both versions but installed the wrong one. I guess this is waht is called "not to see the wood for the trees".

Thanks for your patience!

Hoff, your instructions are very clear. I've followed all of the steps - I still can't get it to work. Do I need to also install the .js files, as noted in post #16 above? I thought PR worked out of the box with superfish. I created a new menu with 4 item, 2 are books that should expand. I created the menu before disabling primary links in PR, but that should not make a difference. The menu is there, just not expanding.

I'm a total newbie to web design and don't know css, php etc. What has drawn me to Drupal is the ability to do things w/o a deep knowledge of them. I've installed FCKedit etc. and things look great on my pc development environment otherwise.

Thanks.

Zev, make sure the items are set "expanded", when you go to admin/build/menu-customize/your-menu make sure the expanded check boxes are checked.

Superfish works out-of-the-box, #16 are notes for helping someone add it to there own custom theme.

Making this active again, seems there's still some interest here.

jmburnz,

Yes, they are set to expanded.

Do I need to create the new menu *after* I have turned off primary links? I can't imagine why. I put the same items into primary links - do I need to pull them out of primary links? I know they are in superfish since I can see where they are showing up in the block page highlighted area for superfish.

I've triple-checked settings. My new menu is called "site navigation", the items needing expansion are set to expand (I even tried setting them all to expand to see if that made a difference). It's in the superfish block. My theme settings are right as well. I've attached jpeg shots of them all, maybe I'm missing something.

Zev

Your menu screenshot show NO sub-menu items! Why would it expand when there is nothing to show?

I have a strange behavior with the superfish menu in safari version 5.02 running on a MAC.
The menu background is black but no text is displayed in there. However if hovering over the line directly under the block the menu shows up (text is white on white background) somehow the menu is in this version of safari one line down displayed.
It works perfectly on safari 5.0.2 on a windows system, in IE7, IE8, FF and even on FF on MAC. Has anyone seen this problem. (My problem is that I do not use MAC but had screenshots from one of my users who reported this problem.

I am having this problem with Safari 5.0.2, too. Changing the menu's font color would be a hack-a-around.

Firefox 3.6.12 and IE8 are all behaving...

Mac screenshot of app is "command+shift+4, space then enter" like "ctrl+alt+prntscrn."

My wife suggests z-indexing it, but I'm not as savvy as she is to even begin to muck with it, other than the "clear:both;" adjustment in layout.css.

Any help would be appreciated, garland is getting on my nerves.

Regards,
-Charles

Hi,

Thanks for this great theme! :-)

However, I have exactly the same issue as 'Erald' and 'thecomputerking' above.

Is there no fix? This seems to be an old issue...

S

Heres my issue - getting very frustrated.

I am using the ATCommerce theme and am trying to setup my menus so that they have dropdowns. For now I am just testing menu options, but ultimately I would like to have (3) menu links with dropdowns (i.e.) Mens would have a drop down with categories 1. Tshirts 2. Vnecks 3. Hoodies

Here is my issue (please see screen shot) I followed basic installation for superfish my I have a black bar underneath where the dropdown is located - it is not hidden

How can I correct this please help

Thank you

josephsergio - have you installed Superfish module and configured it? Need link to a dev site, cant tell much otherwise.